<template>
	<!-- title部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoHome"></image>
		<view class="titlebox-titletext">收益报表</view>
	</view>

	<!-- income部分 -->
	<view class="income">
		<view class="income-text">累计收益 （元）</view>
		<view class="income-digit">0.00</view>
	</view>

	<!-- tabbar部分 -->
	<view class="tabbar">
		<view class="tabbarbox">
			<view class="tab">今日</view>
			<view class="tab">昨日</view>
			<view class="tab">本月</view>
			<view class="tab">上月</view>
		</view>
	</view>


	<!-- details部分 -->
	<view class="details">
		<view class="detailsbox">
			<view class="detailsbox-text">有效订单</view>
			<view class="detailsbox-box">
				<view class="detailsbox-box-textbox">
					<view class="detailsbox-box-textbox-text1">订单数</view>
					<view class="detailsbox-box-textbox-text2">0</view>
				</view>

				<view class="detailsbox-box-textbox">
					<view class="detailsbox-box-textbox-text1">有效订单收益</view>
					<view class="detailsbox-box-textbox-text3">0</view>
				</view>
			</view>
		</view>

		<view class="detailsbox">
			<view class="detailsbox-text">有效订单</view>
			<view class="detailsbox-box">
				<view class="detailsbox-box-textbox">
					<view class="detailsbox-box-textbox-text1">订单数</view>
					<view class="detailsbox-box-textbox-text2">0</view>
				</view>

				<view class="detailsbox-box-textbox">
					<view class="detailsbox-box-textbox-text1">有效订单收益</view>
					<view class="detailsbox-box-textbox-text3">0</view>
				</view>
			</view>
		</view>

		<view class="detailsbox">
			<view class="detailsbox-text">有效订单</view>
			<view class="detailsbox-box">
				<view class="detailsbox-box-textbox">
					<view class="detailsbox-box-textbox-text1">订单数</view>
					<view class="detailsbox-box-textbox-text2">0</view>
				</view>

				<view class="detailsbox-box-textbox">
					<view class="detailsbox-box-textbox-text1">有效订单收益</view>
					<view class="detailsbox-box-textbox-text3">0</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoHome() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/home/home', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	.titlebox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		/* 添加这一行来水平居中 */
	}

	/* title部分样式 */
	.titlebox-backimg {
		width: 15px;
		height: 15px;
	}

	.titlebox-titletext {
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		/* color: #333; */
		font-weight: 600;
	}

	/* income部分 */
	.income {
		padding: 5% 2%;
		display: flex;
		align-items: center;
		border-radius: 10px;
		margin-bottom: 10px;
		background-color: rgb(245, 230, 110);
		width: 92%;
		margin: 0 auto;
	}

	.income-text {
		font-size: 15px;
		flex: 1;
		font-weight: 600;
	}

	.income-digit {
		font-size: 15px;
		font-weight: 600;
	}

	/* tabbar部分 */
	.tabbar {
		padding: 2%;
		width: 92%;
		margin: 0 auto;

	}

	.tabbarbox {
		display: flex;
		align-items: center;
		gap: 2%;
	}

	.tab {
		font-size: 15px;
	}

	/* details部分 */
	.details {
		padding: 2%;
	}

	.detailsbox {
		margin: 0 auto;
		margin-bottom: 10px;
		background: white;
		border-radius: 10px;
		padding: 2%;
	}

	.detailsbox-text {
		padding: 2%;
		font-size: 13px;
	}

	.detailsbox-box {
		display: flex;
		align-items: center;
		padding: 2%;

	}

	.detailsbox-box-textbox {
		flex: 1;
	}

	.detailsbox-box-textbox-text1 {
		font-size: 12px;
		color: rgb(120, 120, 120);
	}

	.detailsbox-box-textbox-text2 {
		font-size: 12px;
	}

	.detailsbox-box-textbox-text3 {
		font-size: 12px;
		color: red;
	}
</style>
